<script setup>
import { onMounted, ref, watch } from 'vue';

const props = defineProps({
  value: [String, Date],
  prop: String,
  refName: String,
  type: { // 可选select | picker
    type: String,
    default: 'picker'
  },
  change: {
    type: Function,
    default: () => {}
  },
  blur: {
    type: Function,
    default: () => {}
  },
  focus: {
    type: Function,
    default: () => {}
  }
})

const val = ref(props.value)
watch(() => props.value, newVal => {
  val.value = newVal
})

const emit = defineEmits(['input', 'getRef'])
emit('input', val) // 传递给父组件

const TPRef = ref(null)
const name =  props.refName || `${props.prop}Ref`
onMounted(() => {
  emit('getRef', { name, value: TPRef.value })
})
</script>

<template>
  <el-time-select
    v-if="type === 'select'"
    ref="TPRef"
    v-model="val"
    v-bind="$attrs"
    @change="change"
    @blur="blur"
    @focus="focus">
  </el-time-select>
  <el-time-picker
    v-else-if="type === 'picker'"
    ref="TPRef"
    v-model="value"
    v-bind="$attrs"
    @change="change"
    @blur="blur"
    @focus="focus">
  </el-time-picker>
</template>
